<template>
  <div class="add-form">
    <!-- 添加文章对话框 -->
    <el-dialog
      :title="
        currentRow && Object.keys(currentRow).length > 0
          ? '修改文章'
          : '新增文章'
      "
      :visible="visible"
      @close="close"
      style="width: 1600px; padding: 30px 20px"
    >
      <!-- <p>{{ Object.keys(currentRow).length }}</p> -->
      <el-form
        :rules="rules"
        ref="fm"
        :model="form"
        label-position="left"
        label-width="100px"
        style="width: 700px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor
            ref="text"
            v-model="form.articleBody"
            :options="editorOption"
          />
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="form.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 富文本编辑器
import { quillEditor } from 'vue-quill-editor' // 富文本编辑器
import 'quill/dist/quill.core.css' // 富文本编辑器的样式
import 'quill/dist/quill.snow.css' // 富文本编辑器的样式
import 'quill/dist/quill.bubble.css' // 富文本编辑器的样式
import { add, update } from '@/api/hmmm/articles.js'
export default {
  name: 'AddArticle',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    quillEditor
  },
  data () {
    return {
      form: {
        title: '',
        videoURL: null,
        articleBody: ''
      },
      rules: {
        title: [{ required: true, message: '不能为空' }],
        articleBody: [{ required: true, message: '不能为空' }]
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        },
        placeholder: ''
      }

    }
  },
  methods: {
    name () {

    },
    submit () {
      this.$refs.fm.validate(async isOk => {
        if (isOk) {
          if (this.currentRow && Object.keys(this.currentRow).length > 0) {
            await update({ ...this.form, id: this.currentRow.id })
            this.$message.success('修改成功')
          } else {
            await add(this.form)
            this.$message.success('新增成功')
          }
          this.close()
          this.$emit('update')
        }
      })
    },
    close () {
      this.form = {
        title: '',
        videoURL: null,
        articleBody: ''
      }
      this.$refs.fm.resetFields()
      this.$emit('closeDialog')
    }
  },
  watch: {
    currentRow (newValue, oldValue) {
      if (newValue) {
        this.form = {
          title: newValue.title,
          videoURL: newValue.videoURL,
          articleBody: newValue.articleBody
        }
        // 这里避免了 监听点击预览窗口时，引发的currentRow变化导致的校验被触发的bug
        // this.$refs.fm.resetFields()
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  // text-align: right;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
/* .el-form-item {
  margin-bottom: 0;
} */
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
.ql-container {
  height: 220px;
}
.el-dialog__footer {
  text-align: right;
}
</style>
